<ul class="nav nav-sidebar">
  <%- navigation.each.with_index do |topic_group, groupidx| -%>
    <%- current_group = topic_group[:id] == group_id -%>
    <li class="nav-header">
      <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicGroup<%= groupidx %>">
        <span id="tgSpan<%= groupidx %>" class="fa <%= current_group ? 'fa-angle-down' : 'fa-angle-right' %>"></span><%= topic_group[:name] %>
      </a>
      <ul id="topicGroup<%= groupidx %>" class="collapse <%= current_group ? 'in' : '' %> list-unstyled">
        <%- topic_group[:topics].each.with_index do |topic, topicidx| -%>
          <%- if not topic.has_key?(:topics) -%>
            <%- current_topic = current_group && (topic[:id] == topic_id) -%>
            <li><a class="<%= current_topic ? ' active' : '' %>" href="<%= subtopic_shim %><%= topic[:path] %>"><%= topic[:name] %></a></li>
          <%- else -%>
            <%- current_subgroup = topic[:id] == subgroup_id -%>
            <li class="nav-header">
              <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicSubGroup-<%= groupidx %>-<%= topicidx %>">
                <span id="sgSpan-<%= groupidx %>-<%= topicidx %>" class="fa <%= current_subgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>&nbsp;<%= topic[:name] %>
              </a>
              <ul id="topicSubGroup-<%= groupidx %>-<%= topicidx %>" class="nav-tertiary list-unstyled collapse<%= current_subgroup ? ' in' : '' %>">
                <%- topic[:topics].each do |subtopic| -%>
                  <%- current_subtopic = current_group && current_subgroup && (subtopic[:id] == topic_id) %>
                  <li><a class="<%= current_subtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subtopic[:path] %>"><%= subtopic[:name] %></a></li>
                <%- end -%>
              </ul>
            </li>
          <%- end -%>
        <%- end -%>
      </ul>
    </li>
  <%- end -%>
</ul>
